<template>
  <div class="content1">
    <div v-html="searchStr" class="content"></div>
    <el-input v-model="searchs" @blur="search"></el-input>
  </div>
</template>

<script lang="ts" setup>
import { ref, onMounted, nextTick } from "vue";
import { useCounterStore } from './stores/counter.ts'

import { marked } from "marked";
import Prism from "prismjs";
import hljs from "highlight.js";
import "highlight.js/styles/default.css"; // 选择你喜欢的样式
import MarkdownIt from 'markdown-it';
// import { log } from "console";
let searchs = ref();
let searchStr = ref();
let codeElement = ref(null);
let index = ref(0);
const typedText = ref("");

onMounted(async () => {

  // let a = 5
  // if (a > 2) {
  //   console.log(2);

  // } else if (a > 3) {
  //   console.log(3);
  // }
  // await nextTick(); // 确保 DOM 更新完成
  getData(searchs.value);
  // let CounterStore = useCounterStore()
  // CounterStore.increment()
  // console.log(CounterStore.count, "状态管理");
});
/**
 *
 * @param str
 */
let getData = async (str) => {
  let res = await fetch(
    "https://api.binjie.fun/api/generateStream?refer__1360=n4%2Bx9D0Gi%3DdmwqGqGNnmDUxYq7KeQRurrD",
    {
      method: "POST",
      body: JSON.stringify({
        stream: false,
        network: true,
        prompt: str,
        system: "1",
        userId: "#/chat/1722822765694",
        withoutContext: false,
      }),
      headers: {
        "Content-Type": "application/json",
      },
    }
  );
  console.log(res);

  const reader = res.body!.getReader();
  const decoder = new TextDecoder();
  let b: any = "";

  let readStream = (): any => {
    return reader.read().then(({ done, value }) => {
      if (done) {
        console.log("Stream finished");
        return;
      }
      console.log(value, "2");

      const chunk: any = decoder.decode(value, { stream: true });
      console.log("Received chunk:", chunk);
      b = b + chunk;
      // searchStr.value = marked(b);
      // 创建 markdown-it 实例
      const md = new MarkdownIt();
      searchStr.value = md.render(b);
      return readStream();


    });
  };
  readStream();
};
let typeWriter = (fullText: any) => {
  if (index.value < fullText.length) {
    typedText.value += fullText.charAt(index.value);
    index.value++;
    searchStr.value = marked(typedText.value);
    setTimeout(typeWriter, 10);
  }
};
function extractObjectFromString(str) {
  const match = str.match(/\{([^}]+)\}/);
  if (match) {
    const objectString = `{${match[1]}}`;
    try {
      return JSON.parse(objectString.replace(/(\w+):/g, '"$1":'));
    } catch (e) {
      console.error("Failed to parse object:", e);
      return null;
    }
  }
  return null;
}

let a = "{'answer' :'如果'}";

let search = (e) => {
  // console.log(e.target.value);
  getData(e.target.value);
};
</script>
<style>
.content1 {
  width: 100vw;
  height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;

  /* justify-content: center; */
}

* {
  padding: 0;
  margin: 0;
}

.content {
  height: 800px;
  width: 800px;

  /* color: palevioletred; */
  /* background: black; */
  overflow: auto;
}

pre {
  /* background: radial-gradient(circle, #000000, #151414) !important; */
}

code[class*="language-"] {
  /* background-color: black !important; */
  color: #fcfcfc !important;
}
</style>
